<template>
  <div style="height: calc(100vh - 160px);overflow-y: auto;width: 100%;overflow-x: hidden">
    <div v-for="appMenu in appMenus" :key="appMenu.appId">
      <el-divider style=""><i :class="appMenu.appIcon" style="color: #32a252;margin-right: 12px;font-size: 20px"></i><span style="color: #32a252;font-size: 20px;">{{ appMenu.appName }}</span></el-divider>
      <el-row :gutter="8">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2" v-for="menu in appMenu.menus" :key="menu.quickId" style="text-align: center">
          <el-card shadow="hover"  @click.native="openMenu(menu)" style="cursor: pointer;color: #409eff;" :body-style="{padding: '8px' }">
            <div><i :class="menu.quickIcon" style="margin-right: 12px;font-size: 30px"></i></div>
            <div style="margin-top: 6px;">{{ menu.quickName }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "AppMenu",
  data() {
    return {
      appMenus: [],
      total: 0
    }
  },
  computed: {
    loginUser(){
      return this.$store.state.userInfos.userInfo;
    }
  },
  created() {
    this.loadSource ()
  },
  methods: {
    loadSource () {
      this.$get('appAuth/quickMenu/' + this.loginUser.userId)
      .then(res => {
        this.$resultMsg(this, res, '快捷菜单获取错误', true)
        this.appMenus.splice(0, this.appMenus.length)
        this.total = 0
        if (res.code === 200) {
          res.data.forEach(item => {
            this.appMenus.push(item)
            this.total = this.total + item.menus.length
          })
        }
        this.$emit('loadSource', { total: this.total })
      })
    },
    openMenu(menu) {
      const { appId, quickName, quickIcon, quickId } = menu
      this.$router.push({
        name: 'AppView',
        query: {
          title: `${quickName})`,
          icon: quickIcon
        },
        params: {
          appId: appId,
          quickId: quickId
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
